<template>
  <div class="formDiv">
    <el-card class="box-card">
      <div class="back">
        <div>
          <el-button
            class="submission priamry_border"
            style="display: flex; float: right"
            @click="back"
          >返回
          </el-button
          >
        </div>
      </div>
      <el-form
        ref="ruleForm"
        :model="detail"
        clearable
        label-width="102px"
        class="formArea"
      >
        <el-row>
          <el-col :span="12"
          >
            <div>
              <el-form-item label="商铺:">
                <span v-html="detail.shopsName"> </span>
              </el-form-item>
            </div
            >
          </el-col>
          <el-col :span="12"
          >
            <div>
              <el-form-item label="类别 :">
                <span v-html="detail.category"> </span>
              </el-form-item>
            </div
            >
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="12"
          >
            <div>
              <el-form-item label="地址：">
                <span v-html="detail.address"> </span>
              </el-form-item>
            </div
            >
          </el-col>
          <el-col :span="12"
          >
            <div>
              <el-form-item label="微信号：">
                <span v-html="detail.weixin"></span>
              </el-form-item>
            </div
            >
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="12"
          >
            <div>
              <el-form-item label="商铺图片：">
                <el-row>
                  <block v-for="item in detail.advertise">
                    <el-col :span="10">
                      <el-image :src="getImageUrl(item)" style="margin-right: 20px;"></el-image>
                    </el-col>
                  </block>
                </el-row>
              </el-form-item>
            </div
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {getDetailById} from "@/api/business";

export default {
  name: "BusinessDetail",
  created() {
    this.getDetail();
  },
  data() {
    return {
      id: this.$route.params.id,
      detail: {
        shopsName: "",
        category: "",
        address: "",
        weixin: '',
        advertise: []
      }
    }
  },
  methods: {
    //根据 id 查询店铺信息
    async getDetail() {
      await getDetailById({id: this.id}).then(res => {
        this.detail = res
        console.log(2222222, this.detail)
      })
    },
    //返回上一页
    back() {
      this.$router.go(-1);
    },
    getImageUrl(url) {
      console.log(7666, url)
      return process.env.VUE_APP_BASE_API + "/" + url;
    }
  }
};
</script>

<style lang="scss">
.formDiv {
  margin-top: 40px;
  margin-left: 30px;

  .back {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: end;
  }

  .formArea {
    padding: 0 30px;

    .picUpload {
      width: 800px;
      height: 100px;

      .upLoadPicBox {
        display: flex;
        width: 800px;
        height: 70px;
      }
    }

    .pictrue {
      width: 60px;
      height: 60px;
      border: 1px dotted rgba(0, 0, 0, 0.1);
      margin-right: 10px;
      position: relative;
      cursor: pointer;
    }

    .btndel {
      position: absolute;
      z-index: 1;
      width: 20px !important;
      height: 20px !important;
      left: 46px;
      top: -4px;
    }
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .el-input__inner {
    width: 30vw;
  }

  .el-select .el-select--medium {
    width: 40vw;
  }

  .buttons {
    width: 100%;
    height: 50px;
  }
}

.upload {
  width: 80px;
  height: 80px;
  // display: flex;
  text-align: center;
  line-height: 80px;
  background-color: pink;
  border: 1px solid #fff;
}
</style>
